<html>
    <head>
        <meta charset="utf-8">
        <title>登录页</title>
    </head>
    <body>
        <div>
            <div id="tips" style="background-color:#f8d7da"></div>
            <form method="post" action="/login">
                username:<input type="text" name="username"/><br/>
                password:<input type="password" name="password"/><br/>
                rememberMe:<input type="checkbox" name="remember-me"/>

                <br/><button type="submit">Login</button>
            </form>
        </div>
        <hr/>
        <div>三方帐号登录</div>
        <div id="oauth-types">
            <a href="/oauth2/authorization/{{regId}}">{{type}}</a>
        </div>
    </body>
</html>

<script type="text/javascript" src="./js/jquery-3.5.0.min.js"></script>
<script type="text/javascript">
window.onload = function(){
    $.ajax({
        method: "GET",
        url: "/oauth-types",
        success: function(res){
            let ele = $("#oauth-types")
            let template = ele.html().trim()
            let urls = res.map(item => template.replace("{{regId}}", item.regId).replace("{{type}}", item.type))
            ele.html(urls.join(" "))
        }
    });

    if(window.location.search.endsWith("?logout")){
        tips("退出成功")
    }
    if(window.location.search.endsWith("?error")){
        tips("帐号或密码错误")
    }
    if(window.location.search.endsWith("?oauth_error")){
        tips("三方帐号登录失败")
    }
};
function tips(msg){
    $("#tips").html(msg).show().delay(3000).hide(300);
}
</script>